<template>
  <div>
    <div class="UserHeader">
      <el-input
        placeholder="请输入内容"
        v-model="input"
        style="width: 200px"
        clearable
      >
      </el-input>
      <el-row>
        <el-button
          style="margin-left: 5px"
          class="black"
          @click="getUserByName(input)"
          icon="el-icon-search"
          circle
        ></el-button>
      </el-row>
    </div>
    <template>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="uid" label="编号" width="100" align="center">
        </el-table-column>
        <el-table-column prop="uname" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.state == 1 ? "正常" : "禁用" }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="date"
          label="注册时间"
          width="100"
          align="center"
        </el-table-column> -->
        <el-table-column label="管理" align="center">
          <template slot-scope="scope">
            <el-button
              class="black"
              type="primary"
              icon="el-icon-refresh-left"
              circle
              @click="
                changeState({
                  uid: scope.row.uid,
                  pwd: scope.row.pwd,
                  type: '重置密码',
                })
              "
              title="重置密码"
            >
            </el-button>
            <el-button
              class="red"
              @click="
                changeState({
                  uid: scope.row.uid,
                  state: scope.row.state,
                  type: '禁用',
                })
              "
              type="danger"
              icon="el-icon-close"
              circle
              title="设置禁用"
            >
            </el-button>
            <el-button
              class="black"
              @click="
                changeState({
                  uid: scope.row.uid,
                  state: scope.row.state,
                  type: '解禁',
                })
              "
              type="success"
              icon="el-icon-check"
              circle
              title="解除禁用"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span
          >确定对该用户
          {{ stateType }}
          吗？
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="black" @click="dialogVisible = false"
            >取 消</el-button
          >
          <el-button
            class="black"
            type="primary"
            @click="disable(userData.uid, pwdChange)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </template>
    <div class="page">
      <el-pagination layout="prev, pager, next" :total="1000"> </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      tableData: [],
      userData: {},
      dialogVisible: false,
      state: "",
      pwdChange: "",
      stateType: "",
    };
  },
  methods: {
    // 请求所有用户列表
    getUser() {
      let params = { page: 1, pagesize: 5 };
      this.$http.userApi.queryAll(params).then((res) => {
        this.tableData = res.data.data;
      });
    },
    // 通过ID修改用户信息
    disable(uid, pwdChange) {
      // console.log("5555555555");
      this.$http.userApi.queryById({ uid }).then((res) => {
        this.userData = res.data.data;
        if (this.state == 1) {
          this.userData.state = 0;
        } else {
          this.userData.state = 1;
        }
        if (pwdChange != "") {
          this.userData.pwd = "123456";
        }
        this.$http.userApi.update(this.userData).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.getUser();
            this.dialogVisible = false;
          }
        });
      });
    },
    // 修改状态方法
    changeState(obj) {
      let { uid, state, pwd, type } = obj;
      this.dialogVisible = true;
      this.userData.uid = uid;
      this.state = state;
      this.pwdChange = pwd;
      this.stateType = type;
    },
    // 通过姓名模糊查询用户
    getUserByName(uname) {
      let params = { uname, page: 1, pagesize: 3 };
      this.$http.userApi.queryLikeName(params).then((res) => {
        // console.log(res,'5555555555         ')
        this.tableData = res.data.data;
      });
    },
  },
  mounted() {
    this.getUser();
  },
};
</script>

<style lang="scss" scoped>
.UserHeader {
  display: flex;
  margin-bottom: 10px;
}
.page {
  position: relative;
}
.el-pagination {
  position: absolute;
  margin-top: 20px;
  right: 0%;
}
.black {
  background: #010101 !important;
  border-color: #010101 !important;
  color: #fff;
}
.red {
  background: #9c1d12 !important;
  border-color: #9c1d12 !important;
  color: #fff;
}
</style>
